<template>
    <div v-loading="loading" class="preview-picture">
        <!-- 单图  -->
        <PhotosContain
            v-if="!Array.isArray(picture)"
            :src="lazyImg"
            :preview-src-list="[picture]"
            :preview-teleported="true"
            :hide-on-click-modal="true"
            height="inherit"
        >
            <template #error>
                <div class="flex justify-center items-center h-full">
                    <img :src="ImageError" alt="加载错误" />
                </div>
            </template>
        </PhotosContain>

        <!-- 多图 -->
        <template v-else>
            <PhotosContain
                v-for="(item, index) in picture"
                :key="index"
                :src="item"
                class="image__item"
                :initial-index="index"
                :preview-src-list="picture"
                :preview-teleported="true"
                :hide-on-click-modal="true"
            />
        </template>
    </div>
</template>

<script setup lang="ts">
import ImageError from '~/assets/image/draw/error.png'

withDefaults(
    defineProps<{
        loading: boolean;
        lazyImg?: string | any; // 缩略图
        picture?: string | any; // 图片
    }>(),
    {
        lazyImg: '',
        picture: ''
    }
)
</script>

<style lang="scss">
.preview-picture {
    display: flex;
    flex-wrap: wrap;
    place-content: center center;
    min-width: 150px;
    max-width: 620px;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    background: #f8f8f8;
    img {
        object-fit: unset !important;
    }
    .image__item {
        flex-basis: calc(50% - 10px);
        margin: 5px;
    }
}
</style>
